<template>
	<div class="system-add-user-container">
		<el-dialog title="新增音乐" v-model="isShowDialog" width="769px">
			<el-form :model="ruleForm" size="default" :rules="rules" label-width="90px">
				<el-row :gutter="35">
					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
						<el-form-item label="音乐名称" prop="title">
							<el-input v-model="ruleForm.title" placeholder="请输入音乐名称" clearable></el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
						<el-form-item label="作者">
							<el-input v-model="ruleForm.author" placeholder="请输入作者名称" clearable></el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
						<el-form-item label="专辑">
							<el-input v-model="ruleForm.album" placeholder="请输专辑" clearable></el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
						<el-form-item label="描述">
							<el-input v-model="ruleForm.describe" type="textarea" placeholder="请输入音乐描述" maxlength="150"></el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="8" :md="8" :lg="8" :xl="8" class="mb20">
						<el-form-item>
							<el-upload
								ref="upload"
								class="upload-music"
								action="#"
								:http-request="uploadAction"
								:limit="1"
								:on-exceed="handleExceed"
								:auto-upload="true"
								:before-upload="beforeUpload"
							>
							<el-button type="primary">选择文件</el-button>
							<template #tip>
								<div class="el-upload__tip" style="color:brown;">{{ uploadTip }}</div>
							</template>
							</el-upload>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="onCancel" size="default">取 消</el-button>
					<el-button type="primary" @click="onSubmit" size="default">新 增</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script lang="ts">
import { reactive, toRefs, onMounted, defineComponent, ref } from 'vue';
import { ElMessage, genFileId, FormRules, ElLoading  } from 'element-plus';
import type { UploadInstance, UploadProps, UploadRawFile, UploadProgressEvent } from 'element-plus'
import {blueTMusicApi,fileUploadApi} from '/@/api/storage/index';

const musicApi = blueTMusicApi();
const fileApi = fileUploadApi();

// 定义接口来定义对象的类型
interface UserState {
	isShowDialog: boolean;
	ruleForm: {
		title: string,
		author: string,
		album: string,
		fileId: string,
		describe: string,
	};
	uploadTip: string,
	uploadStat: boolean,
}


export default defineComponent({
	name: 'storageAddMusic',
	setup(props, context) {

		const upload = ref<UploadInstance>();

		const state = reactive<UserState>({
			isShowDialog: false,
			ruleForm: {
				title: '', // 文件名
				author: '', // 作者
				album: '', // 专辑
				fileId:'',	//文件上传后Id
				describe: '', // 描述
			},
			uploadTip: "限制上传一个文件",
			uploadStat: false,
		});
		const rules = reactive<FormRules>({
			title: [
				{
				required: true,
				message: '请输入歌曲名',
				trigger: 'blur',
				},
			],
		})


		// 打开弹窗
		const openDialog = () => {
			state.isShowDialog = true;
		};
		// 关闭弹窗
		const closeDialog = () => {
			state.isShowDialog = false;
		};
		// 取消
		const onCancel = () => {
			closeDialog();
		};
		// 新增
		const onSubmit = () => {
			if (state.uploadStat) {
				musicApi.add(state.ruleForm).then((res)=>{
					context.emit('initTableData');
				})
				closeDialog();
			} else {
				ElMessage.error('请上传文件!')
                return false
			}
		};

		//选择文件
		const handleExceed: UploadProps['onExceed'] = (files) => {
			upload.value!.clearFiles()
			const file = files[0] as UploadRawFile
			file.uid = genFileId()
			upload.value!.handleStart(file)
		}
		//自定义上传
		const uploadAction = (option: any) => {
			const loading = ElLoading.service({
				lock: true,
				text: '拼命上传中......',
				background: 'rgba(0, 0, 0, 0.7)',
			})
            let param = new FormData();
            param.append('file', option.file);
            param.append('path', 'music/');
            fileApi.upLoadFiles(param).then((res: any) => {
                state.ruleForm.fileId = res.data;
				state.uploadStat = true;
				loading.close();
            }).catch(() => {
				loading.close();
			});
        }
		const beforeUpload = (file: UploadRawFile) => {
            const type = ['audio/mp3','audio/wav','audio/flac', 'audio/mpeg']
            if (type.indexOf(file.type) === -1) {
                ElMessage.error('上传的文件必须是MP3、WAV、FLAC三种之一!')
                return false
            } else if (file.size / 1024 / 1024 > 30) {
                ElMessage.error('图片大小不能超过30MB!')
                return false
            }
            return true
        }
		// 初始化部门数据
		// 页面加载时
		onMounted(() => {
			// initTableData();
		});
		return {
			rules,
			openDialog,
			closeDialog,
			onCancel,
			onSubmit,
			upload,
			uploadAction,
			handleExceed,
			beforeUpload,
			...toRefs(state),
		};
	},
});
</script>